<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>孕育宝典 - 饮食习惯调查</title>
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
        <style>
            body {
                font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
                background-color: #f5f5f5;
                color: #333333;
                margin: 0;
                padding: 0;
            }
            .device-container {
                width: 390px;
                height: 844px;
                overflow: hidden;
                position: relative;
                background-color: #ffffff;
            }
            .status-bar {
                height: 44px;
                background-color: #ffffff;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 20px;
                font-size: 14px;
                font-weight: 600;
            }
            .header {
                background-color: #ffffff;
                padding: 12px 16px 8px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #f0f0f0;
            }
            .nav-bar {
                height: 60px;
                background-color: #ffffff;
                position: absolute;
                bottom: 0;
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                border-top: 1px solid #f0f0f0;
            }
            .nav-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #666666;
                font-size: 10px;
            }
            .nav-item.active {
                color: #ff9fb5;
            }
            .main-content {
                height: calc(844px - 44px - 60px - 56px);
                overflow-y: auto;
                padding: 16px;
                background-color: #f9f9f9;
            }
            .form-card {
                background-color: #ffffff;
                border-radius: 12px;
                padding: 16px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                margin-bottom: 16px;
            }
            .form-title {
                font-size: 16px;
                font-weight: 600;
                color: #333;
                margin-bottom: 16px;
                display: flex;
                align-items: center;
            }
            .form-title i {
                margin-right: 8px;
                color: #ff9fb5;
            }
            .form-desc {
                font-size: 14px;
                color: #666;
                margin-bottom: 16px;
                line-height: 1.5;
            }
            .form-group {
                margin-bottom: 16px;
            }
            .form-label {
                font-size: 14px;
                font-weight: 500;
                color: #333;
                margin-bottom: 8px;
                display: block;
            }
            .input-field {
                width: 100%;
                padding: 12px;
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                font-size: 14px;
                color: #333;
                background-color: #f9f9f9;
            }
            .input-field:focus {
                border-color: #ff9fb5;
                outline: none;
            }
            .radio-group,
            .checkbox-group {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                margin-bottom: 8px;
            }
            .radio-item,
            .checkbox-item {
                display: flex;
                align-items: center;
                position: relative;
                margin-right: 8px;
                margin-bottom: 8px;
            }
            .radio-label,
            .checkbox-label {
                display: inline-flex;
                align-items: center;
                padding: 8px 12px;
                background-color: #f0f0f0;
                border-radius: 16px;
                font-size: 13px;
                color: #666;
                cursor: pointer;
                transition: all 0.2s ease;
            }
            .radio-input,
            .checkbox-input {
                position: absolute;
                opacity: 0;
                cursor: pointer;
            }
            .radio-input:checked + .radio-label,
            .checkbox-input:checked + .checkbox-label {
                background-color: #fff0f3;
                color: #ff5c8d;
            }
            .tag-container {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                margin-bottom: 8px;
                margin-top: 8px;
            }
            .tag {
                display: inline-flex;
                align-items: center;
                padding: 6px 12px;
                background-color: #f0f0f0;
                border-radius: 16px;
                font-size: 13px;
                color: #666;
            }
            .tag i {
                margin-left: 6px;
                font-size: 12px;
                color: #999;
            }
            .tag.active {
                background-color: #fff0f3;
                color: #ff5c8d;
            }
            .tag-input {
                flex: 1;
                min-width: 120px;
                padding: 8px 12px;
                border: 1px solid #e0e0e0;
                border-radius: 16px;
                font-size: 13px;
                color: #333;
                background-color: #f9f9f9;
            }
            .tag-input:focus {
                border-color: #ff9fb5;
                outline: none;
            }
            .btn-container {
                margin-top: 24px;
                display: flex;
                justify-content: space-between;
            }
            .btn-primary {
                background-color: #ff9fb5;
                color: white;
                padding: 12px 24px;
                border-radius: 24px;
                font-size: 15px;
                font-weight: 500;
                border: none;
                width: 100%;
                cursor: pointer;
                transition: all 0.2s ease;
            }
            .btn-primary:hover {
                background-color: #ff85a5;
            }
            .btn-secondary {
                background-color: #f0f0f0;
                color: #666;
                padding: 12px 20px;
                border-radius: 24px;
                font-size: 15px;
                font-weight: 500;
                border: none;
                cursor: pointer;
                transition: all 0.2s ease;
            }
            .btn-secondary:hover {
                background-color: #e0e0e0;
            }
            .form-note {
                font-size: 12px;
                color: #999;
                margin-top: 4px;
            }
            .form-divider {
                height: 1px;
                background-color: #f0f0f0;
                margin: 16px 0;
            }
            .progress-container {
                margin: 8px 0 24px;
                background-color: #f0f0f0;
                height: 8px;
                border-radius: 4px;
                overflow: hidden;
            }
            .progress-bar {
                height: 100%;
                background-color: #ff9fb5;
                width: 25%;
            }
            .progress-text {
                font-size: 13px;
                color: #999;
                text-align: right;
                margin-top: 4px;
            }
            .slider-container {
                padding: 0 8px;
                margin: 16px 0;
            }
            .slider {
                -webkit-appearance: none;
                width: 100%;
                height: 6px;
                border-radius: 3px;
                background: #f0f0f0;
                outline: none;
                margin: 10px 0;
            }
            .slider::-webkit-slider-thumb {
                -webkit-appearance: none;
                appearance: none;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background: #ff9fb5;
                cursor: pointer;
            }
            .slider-labels {
                display: flex;
                justify-content: space-between;
                margin-top: 8px;
            }
            .slider-label {
                font-size: 12px;
                color: #999;
                position: relative;
                text-align: center;
            }
            .slider-value {
                font-size: 14px;
                font-weight: 500;
                color: #ff9fb5;
                text-align: center;
                margin-top: 12px;
            }
        </style>
    </head>
    <body>
        <div class="device-container">
            <!-- iOS状态栏 -->
            <div class="status-bar">
                <span>9:41</span>
                <div class="flex items-center">
                    <i class="fas fa-signal mr-1"></i>
                    <i class="fas fa-wifi mr-1"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>

            <!-- 页面头部 -->
            <div class="header">
                <div class="flex items-center">
                    <i class="fas fa-arrow-left mr-4"></i>
                    <h1 class="text-lg font-medium">饮食习惯调查</h1>
                </div>
                <div class="flex gap-3">
                    <i class="fas fa-question-circle"></i>
                    <i class="fas fa-ellipsis-h"></i>
                </div>
            </div>

            <!-- 主内容区 -->
            <div class="main-content">
                <!-- 进度提示 -->
                <div class="form-card">
                    <div class="form-title">
                        <i class="fas fa-clipboard-check"></i>
                        <span>个性化饮食习惯调查</span>
                    </div>
                    <div class="form-desc">
                        通过了解您的饮食习惯，我们将为您提供更精准的饮食建议和营养分析。所有信息仅用于个性化服务，我们将严格保护您的隐私。
                    </div>
                    <div class="progress-container">
                        <div class="progress-bar"></div>
                    </div>
                    <div class="progress-text">完成度：1/4</div>
                </div>

                <!-- 基本饮食习惯 -->
                <div class="form-card">
                    <div class="form-title">
                        <i class="fas fa-utensils"></i>
                        <span>基本饮食习惯</span>
                    </div>

                    <div class="form-group">
                        <label class="form-label">您的饮食规律如何？</label>
                        <div class="radio-group">
                            <div class="radio-item">
                                <input type="radio" id="regular1" name="meal-regular" class="radio-input" />
                                <label for="regular1" class="radio-label">很规律</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="regular2" name="meal-regular" class="radio-input" checked />
                                <label for="regular2" class="radio-label">较规律</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="regular3" name="meal-regular" class="radio-input" />
                                <label for="regular3" class="radio-label">不规律</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="regular4" name="meal-regular" class="radio-input" />
                                <label for="regular4" class="radio-label">很不规律</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">您通常每天吃几顿饭？</label>
                        <div class="radio-group">
                            <div class="radio-item">
                                <input type="radio" id="meals1" name="meal-count" class="radio-input" />
                                <label for="meals1" class="radio-label">2顿</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="meals2" name="meal-count" class="radio-input" checked />
                                <label for="meals2" class="radio-label">3顿</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="meals3" name="meal-count" class="radio-input" />
                                <label for="meals3" class="radio-label">4顿</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="meals4" name="meal-count" class="radio-input" />
                                <label for="meals4" class="radio-label">5顿或更多</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">您的零食习惯如何？</label>
                        <div class="radio-group">
                            <div class="radio-item">
                                <input type="radio" id="snack1" name="snack-habit" class="radio-input" />
                                <label for="snack1" class="radio-label">从不吃零食</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="snack2" name="snack-habit" class="radio-input" checked />
                                <label for="snack2" class="radio-label">偶尔吃</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="snack3" name="snack-habit" class="radio-input" />
                                <label for="snack3" class="radio-label">经常吃</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="snack4" name="snack-habit" class="radio-input" />
                                <label for="snack4" class="radio-label">每天都吃</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">您的饮水量如何？（每天）</label>
                        <div class="slider-container">
                            <input type="range" min="1" max="10" value="5" class="slider" id="water-intake" />
                            <div class="slider-value">1500ml</div>
                            <div class="slider-labels">
                                <div class="slider-label">少于500ml</div>
                                <div class="slider-label">1500ml</div>
                                <div class="slider-label">2500ml以上</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 食物偏好 -->
                <div class="form-card">
                    <div class="form-title">
                        <i class="fas fa-heart"></i>
                        <span>食物偏好</span>
                    </div>

                    <div class="form-group">
                        <label class="form-label">您喜欢的口味偏好是？（可多选）</label>
                        <div class="checkbox-group">
                            <div class="checkbox-item">
                                <input type="checkbox" id="taste1" class="checkbox-input" checked />
                                <label for="taste1" class="checkbox-label">清淡</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="taste2" class="checkbox-input" />
                                <label for="taste2" class="checkbox-label">咸味</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="taste3" class="checkbox-input" checked />
                                <label for="taste3" class="checkbox-label">酸味</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="taste4" class="checkbox-input" />
                                <label for="taste4" class="checkbox-label">甜味</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="taste5" class="checkbox-input" />
                                <label for="taste5" class="checkbox-label">辣味</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="taste6" class="checkbox-input" />
                                <label for="taste6" class="checkbox-label">麻味</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">您更偏好哪类食物？（可多选）</label>
                        <div class="checkbox-group">
                            <div class="checkbox-item">
                                <input type="checkbox" id="food1" class="checkbox-input" checked />
                                <label for="food1" class="checkbox-label">肉类</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="food2" class="checkbox-input" checked />
                                <label for="food2" class="checkbox-label">鱼类</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="food3" class="checkbox-input" checked />
                                <label for="food3" class="checkbox-label">蔬菜</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="food4" class="checkbox-input" />
                                <label for="food4" class="checkbox-label">水果</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="food5" class="checkbox-input" />
                                <label for="food5" class="checkbox-label">豆类</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="food6" class="checkbox-input" />
                                <label for="food6" class="checkbox-label">奶制品</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="food7" class="checkbox-input" />
                                <label for="food7" class="checkbox-label">坚果</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="food8" class="checkbox-input" />
                                <label for="food8" class="checkbox-label">谷物</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">您喜欢的烹饪方式是？（可多选）</label>
                        <div class="checkbox-group">
                            <div class="checkbox-item">
                                <input type="checkbox" id="cook1" class="checkbox-input" checked />
                                <label for="cook1" class="checkbox-label">蒸</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="cook2" class="checkbox-input" checked />
                                <label for="cook2" class="checkbox-label">煮</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="cook3" class="checkbox-input" />
                                <label for="cook3" class="checkbox-label">炒</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="cook4" class="checkbox-input" />
                                <label for="cook4" class="checkbox-label">炸</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="cook5" class="checkbox-input" />
                                <label for="cook5" class="checkbox-label">烤</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="cook6" class="checkbox-input" />
                                <label for="cook6" class="checkbox-label">卤</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="cook7" class="checkbox-input" />
                                <label for="cook7" class="checkbox-label">生食</label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 饮食限制 -->
                <div class="form-card">
                    <div class="form-title">
                        <i class="fas fa-ban"></i>
                        <span>饮食限制</span>
                    </div>

                    <div class="form-group">
                        <label class="form-label">您有特殊的饮食习惯吗？</label>
                        <div class="radio-group">
                            <div class="radio-item">
                                <input type="radio" id="diet1" name="special-diet" class="radio-input" checked />
                                <label for="diet1" class="radio-label">无特殊习惯</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="diet2" name="special-diet" class="radio-input" />
                                <label for="diet2" class="radio-label">素食主义</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="diet3" name="special-diet" class="radio-input" />
                                <label for="diet3" class="radio-label">低碳水饮食</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="diet4" name="special-diet" class="radio-input" />
                                <label for="diet4" class="radio-label">无麸质饮食</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="diet5" name="special-diet" class="radio-input" />
                                <label for="diet5" class="radio-label">地中海饮食</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="diet6" name="special-diet" class="radio-input" />
                                <label for="diet6" class="radio-label">其他</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">您有食物过敏吗？（可添加多个）</label>
                        <div class="tag-container">
                            <div class="tag active">牛奶 <i class="fas fa-times"></i></div>
                            <div class="tag active">花生 <i class="fas fa-times"></i></div>
                            <input type="text" class="tag-input" placeholder="添加过敏食物..." />
                        </div>
                        <div class="form-note">点击"+"添加更多过敏食物</div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">您有忌口的食物吗？（可添加多个）</label>
                        <div class="tag-container">
                            <div class="tag active">香菜 <i class="fas fa-times"></i></div>
                            <div class="tag active">内脏 <i class="fas fa-times"></i></div>
                            <input type="text" class="tag-input" placeholder="添加忌口食物..." />
                        </div>
                        <div class="form-note">点击"+"添加更多忌口食物</div>
                    </div>
                </div>

                <!-- 健康状况 -->
                <div class="form-card">
                    <div class="form-title">
                        <i class="fas fa-heartbeat"></i>
                        <span>健康状况</span>
                    </div>

                    <div class="form-group">
                        <label class="form-label">您有胃肠道方面的问题吗？（可多选）</label>
                        <div class="checkbox-group">
                            <div class="checkbox-item">
                                <input type="checkbox" id="digestive1" class="checkbox-input" checked />
                                <label for="digestive1" class="checkbox-label">无</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="digestive2" class="checkbox-input" />
                                <label for="digestive2" class="checkbox-label">消化不良</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="digestive3" class="checkbox-input" />
                                <label for="digestive3" class="checkbox-label">胃酸反流</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="digestive4" class="checkbox-input" />
                                <label for="digestive4" class="checkbox-label">便秘</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="digestive5" class="checkbox-input" />
                                <label for="digestive5" class="checkbox-label">腹泻</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="digestive6" class="checkbox-input" />
                                <label for="digestive6" class="checkbox-label">肠易激综合征</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">您是否有以下健康状况？（可多选）</label>
                        <div class="checkbox-group">
                            <div class="checkbox-item">
                                <input type="checkbox" id="health1" class="checkbox-input" checked />
                                <label for="health1" class="checkbox-label">无</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="health2" class="checkbox-input" />
                                <label for="health2" class="checkbox-label">贫血</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="health3" class="checkbox-input" />
                                <label for="health3" class="checkbox-label">高血压</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="health4" class="checkbox-input" />
                                <label for="health4" class="checkbox-label">低血压</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="health5" class="checkbox-input" />
                                <label for="health5" class="checkbox-label">糖尿病</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="health6" class="checkbox-input" />
                                <label for="health6" class="checkbox-label">甲状腺问题</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="health7" class="checkbox-input" />
                                <label for="health7" class="checkbox-label">多囊卵巢综合征</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">您有家族遗传病史吗？（可多选）</label>
                        <div class="checkbox-group">
                            <div class="checkbox-item">
                                <input type="checkbox" id="genetic1" class="checkbox-input" checked />
                                <label for="genetic1" class="checkbox-label">无</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="genetic2" class="checkbox-input" />
                                <label for="genetic2" class="checkbox-label">心脏病</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="genetic3" class="checkbox-input" />
                                <label for="genetic3" class="checkbox-label">高血压</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="genetic4" class="checkbox-input" />
                                <label for="genetic4" class="checkbox-label">糖尿病</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="genetic5" class="checkbox-input" />
                                <label for="genetic5" class="checkbox-label">癌症</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="genetic6" class="checkbox-input" />
                                <label for="genetic6" class="checkbox-label">其他遗传病</label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 提交按钮 -->
                <div class="form-card">
                    <div class="btn-container">
                        <button class="btn-secondary mr-2">保存草稿</button>
                        <button class="btn-primary ml-2">下一步</button>
                    </div>
                    <div class="form-note text-center mt-4">
                        您的饮食习惯信息将仅用于提供个性化服务，我们将严格保护您的隐私。
                    </div>
                </div>
            </div>

            <!-- 底部导航栏 -->
            <div class="nav-bar">
                <div class="nav-item">
                    <i class="fas fa-home text-xl mb-1"></i>
                    <span>首页</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-notes-medical text-xl mb-1"></i>
                    <span>记录</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-book-medical text-xl mb-1"></i>
                    <span>知识库</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-user-friends text-xl mb-1"></i>
                    <span>伴侣空间</span>
                </div>
                <div class="nav-item active">
                    <i class="fas fa-user text-xl mb-1"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>
    </body>
</html>
